<template>
    <div class="home" v-if="1==1">
        <a href="https://github.com/wuyawei" target="_blank" class="github-logo"></a>
        <div class="fork-me-on-github"></div>
        <div class="center">
            <div>
                <router-link :to="{name: 'Speech'}">H5 语音识别</router-link>
            </div>
            <div>
                <router-link :to="{name: 'communication'}">Vue 组件间通信</router-link>
            </div>
            <div>
                <router-link :to="{name: 'responsive'}">Vue 响应式原理</router-link>
            </div>
            <div>
                <router-link :to="{name: 'transfer'}">video 标签之间的流传输</router-link>
            </div>
            <div>
                <router-link :to="{name: 'local1'}">WebRTC 1 v 1 本地对等连接</router-link>
            </div>
            <div>
                <router-link :to="{name: 'remote1'}">WebRTC 1 v 1 网络对等连接</router-link>
            </div>
            <div>
                <router-link :to="{name: 'many'}">多人聊天</router-link>
            </div>
            <div>
                <router-link :to="{name: 'whiteboard'}">白板演示</router-link>
            </div>
            <div>
                <router-link :to="{name: 'palette'}">共享画板</router-link>
            </div>
        </div>
    </div>
    <div v-else>
        <div class="box">
            <div class="left">
                <div class="hede">
                    <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                </div>
                <div class="tog">
                    <div class="chat">
                        <i class="iconfont el-icon-chat-round" v-if="1==2"></i>
                        <i class="iconfont el-icon-chat-line-round" v-else></i>
                    </div>
                    <div class="addressList ">
                        <i class="iconfont el-icon-user-solid" v-if="1==1"></i>
                        <i class="iconfont el-icon-user" v-else></i>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="input">
                    <!-- <input type="text"> -->
                    <el-input size="mini" placeholder="搜索" v-model="input3">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <div class="plus"><i class="el-icon-plus"></i></div>
                </div>
                <div class="lists">
                    <div class="list" v-for="i in [1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3]">
                        <div class="hede">
                            <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                        </div>
                        <div class="title">
                            <div class="name">亲 <span class="pull-right time">刚刚</span></div>
                            <div class="info">[图片] <span class="pull-right  el-icon-bell"></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title">我是一人个小帅 <i class="el-icon-more pull-right"></i></div>
                <div class="top">
                    <div class="textLists">
                        <div class="textList">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i class="el-icon-caret-left"></i>
                                因为课程还木有结束。。</div>
                        </div>
                        <div class="textList this">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <!-- <i class="el-icon-caret-left"></i> -->
                                <i class="el-icon-caret-right"></i>
                                还有老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结束。。</div>
                        </div>
                        <div class="textList">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i class="el-icon-caret-left"></i>
                                还有老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结束。。
                            </div>
                        </div>
                        <div class="textList">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i class="el-icon-caret-left"></i>
                                还有老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结束。。
                            </div>
                        </div>
                        <div class="textList">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i class="el-icon-caret-left"></i>
                                还有老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结束。。
                            </div>
                        </div>
                        <div class="textList">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i class="el-icon-caret-left"></i>
                                还有老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结老师，我有一个打卡训练营，已经修改过一次截止时间了，能否请您再后台修改一下呢？因为课程还木有结束。。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div>
                        <!-- <i class="el-icon-service"></i> -->
                        <i class="iconfont pull-left el-icon-picture-outline-round"></i>
                        <i class="iconfont pull-left el-icon-folder-opened"></i>
                        <i class="iconfont pull-left el-icon-chat-dot-round"></i>
                        <!-- <i class="iconfont el-icon-camera"></i> -->
                        <i class="iconfont el-icon-phone"></i>
                        <i class="iconfont el-icon-video-camera-solid"></i>
                    </div>
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea1">
                    </el-input>
                    <el-button size="mini" plain>发送</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'home',
    data() {
        return {
            sdata: [],
            textarea1: '',
        }
    },
    watch: {},
    methods: {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.box {
    margin: 20px 100px;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    min-height: 70vh;
    border: 1px solid #f1f1f1;
    /*overflow: hidden;*/

}

.left {
    text-align: center;
    color: #fff;
    width: 60px;
    min-width: 60px;
    background: #303133;
    padding-top: 20px;
}

.hede {
    img {
        width: 40px;
        height: 40px;
        border-radius: 2px;
    }
}

.iconfont {
    font-size: 22px;
}

.tog {
    div {
        margin-top: 16px;
        padding: 4px;
    }
}

.center {
    width: 250px;
    min-width: 250px;
    background: #e2e2e2;
    padding: 20px 0 0;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;

    .lists {
        flex: 1;
        max-height: 700px;
        overflow: auto;
        &:-webkit-scrollbar{
        display:none;
        }
        box-sizing: border-box;
        /*height: 100%;*/
        background: #f2f2f2;

        .list {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            padding: 10px;

            &:hover {
                background: #ddd;
            }


            .title {
                text-align: left;
                width: 100%;
                font-size: 14px;
                margin-left: 10px;
            }

            .time {
                font-size: 10px;
                color: #aaa;
            }

            .info {
                margin-top: 4px;
                font-size: 12px;
                color: #999;
            }
        }
    }
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.input {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    padding: 0 10px 10px;

    .plus {
        margin-left: 10px;
        background: #f1f1f1;
        text-align: center;
        padding: 3px 4px;
        border-radius: 4px;
    }
}

.right {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;

    .title {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f1f1f1;
        background: #fff;
        /*align-self: flex-start;*/
        position: absolute;
        box-sizing: border-box;
        top: 30px;
        width: 100%;
        z-index: 2;
        /*align-content: flex-start;*/
    }

    flex: 1;
    min-width: 400px;
    padding-top: 20px;

    .top {
        margin-top: 30px;
        overflow: auto;
        max-height: 500px;
    }

    .bottom {
        padding-left: 20px;
        padding-right: 20px;
        border-top: 1px solid #f1f1f1;
        text-align: right;
        /*align-items: flex-end;*/
        color: #333;

        .iconfont {
            padding: 8px;
        }

        button {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    }
}

.textLists {
    padding: 30px;
    /*background: #efefef;*/
}

.textList {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    /*flex-direction: column;*/
    text-align: left;
    margin-top: 15px;

    /*align-items:center;*/
    .text {
        margin-left: 10px;
        margin-right: 10px;
        max-width: 80%;
        background: #fff;
        border: 1px solid #f1f1f1;
        padding: 6px;
        line-height: 1.5;
        /*min-height: 40px;*/
        box-sizing: border-box;
        font-size: 16px;
        border-radius: 4px;
        position: relative;

        .el-icon-caret-left {
            position: absolute;
            top: 10px;
            left: -10px;
            color: #f1f1f1;
        }
    }
}

.textList.this {
    justify-content: flex-end;

    .text {
        order: -1;

        .el-icon-caret-right {
            position: absolute;
            left: auto;
            top: 10px;
            right: -10px;
            color: #f1f1f1;
        }
    }
}

::-webkit-scrollbar{
display:none;
}

/*   .home{
      text-align: center;
      .github-logo{
          position: absolute;
          right: 0;
          top: 0;
          width: 120px;
          height: 120px;
          z-index: 1;
          background-image: url("../assets/github.png");
          background-size: contain;
          background-position: 10px -8px;
          background-repeat: no-repeat;
          display: block;
      }
  }
  .center{
      margin: auto;
      font-size: 18px;
      border: 1px solid #ddd;
      margin-top: 100px;
      position: relative;
      a{
          color: #323232;
      }
      div{
          line-height: 48px;
          border-bottom: 1px solid #ddd;
          cursor: pointer;
      }
      div:last-child{
          border-bottom: none;
      }
      div:hover{
          background-color: #25b25e;
          a{
              display: block;
              color: #fff;
          }
      }
  }
  
  .fork-me-on-github{
      width: 0;
      height: 0;
      position: absolute;
      right: 0;
      top:0;
      border-right: 60px solid rgba(37, 178, 94, 0.8);
      border-top: 60px solid rgba(37, 178, 94, 0.8);
      border-bottom: 60px solid #fff;
      border-left: 60px solid #fff;
  }
  .edit-div{
      width: 200px;
      height: 200px;
      display: table-cell;
      vertical-align: middle;
      border: 1px solid #000;
  } */
</style>